<template>
  <div class="box">
    <Row>
      <Col span="12" class="boxMain">
        <h2>低保对象变化情况</h2>
        <div id="staffAcceptanceX" :style="{ width: width + 'px', height: height + 'px'}"></div>
      </Col>
      <Col span="12" class="boxMain">
        <h2>特殊对象保障情况</h2>
        <div id="staffAcceptanceB" :style="{ width: width + 'px', height: height + 'px'}"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      split1: 0.5
    }
  },
  mounted () {
    this.ecN()
    this.ecR()
  },
  props: {
    width: {
      type: String,
      default: () => {
        return '100%'
      }
    },
    height: {
      type: Number,
      default: () => {
        return 580
      }
    }
  },
  methods: {
    ecN () {
      var chartDom = document.getElementById('staffAcceptanceX')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            areaStyle: {}
          },
          {
            type: 'line',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          }
        ],
        tooltip: {
          trigger: 'axis',
          formatter: function (a) {
            var res = ''
            var nameList = a
            for (var i = 0; i<a.length; i++) {
              if (nameList[i].data !== undefined) {
                res += nameList[i].seriesName + ':' + nameList[i].data + '%' + '<br>'
              }
            }
            res = res.split('<br>')
            return res[0] + '<br>' + res[1]
          }
        }
      }

      option && myChart.setOption(option)
    },
    ecR () {
      var chartDom = document.getElementById('staffAcceptanceB')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '特殊对象',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '测试数据', num: '4.544人' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
 .box{
      width: 100%;
      height: 100%;
      background: #f5f5f5;
  }
  .box h2 {
    margin-bottom: 24px;
  }
  .box .btnN{
    width: 40px;
    height: 20px;
    text-align: center;
    border-radius: 30px;
    background: linear-gradient(to left, #FF515A, #FFDD53);
    color: #fff;
  }
  .eMain {
    display: flex;
  }
  .box .boxMain {
    width: 94%;
    height: 100%;
    background: #fff;
  }
  .ybCol {
    height: 290px;
    text-align: center;
  }
  .ybCol p {
    margin-bottom: 8px;
  }
</style>
